<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Transition | Semantic UI</title>

<meta name="description" content="A transition is an animation usually used to move content in or out of view" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="transition" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="active item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Transition
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="active item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        

<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Transition
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A transition is an animation usually used to move content in or out of view
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/transition.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Transition] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Transition should do this%0A%0A**Result**%0AThe Transition does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Transition</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Transition/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Transition/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-transition">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-transition">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Transition.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>


<script src="/javascript/transition.js"></script>

<div class="main ui container">

  <div class="ui active tab" data-tab="definition">
    <div class="fixed column">
      <div class="demo content ui sticky">
        <img src="/images/leaves/1.png" class="ui autumn leaf image">
      </div>
    </div>
    <div class="examples">

      <h2 class="ui dividing header">Transitions</h2>

      <div class="no example">
        <h4 class="ui header">Scale</h4>
        <p>An element can scale into or out of view</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('scale')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">
          Zoom
          <div class="ui teal label">New in 2.3</div>
        </h4>
        <p>An element can zoom into view from far away</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('zoom')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Fade</h4>
        <p>An element can fade into or out of view descending and ascending</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fade')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fade up')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fade down')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fade left')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fade right')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Flip</h4>
        <p>An element can flip into or out of view vertically or horizontally</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('horizontal flip')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('vertical flip')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Drop</h4>
        <p>An element can drop into view from above </p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('drop')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Fly</h4>
        <p>An element can fly in from off canvas</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fly left')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fly right')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fly up')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('fly down')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Swing</h4>
        <p>An element can swing into view</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('swing left')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('swing right')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('swing up')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('swing down')
        ;
        </div>
      </div>


      <div class="no example">
        <h4 class="ui header">Browse</h4>

        <p>An element can appear and disappear as part of a series</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('browse')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('browse right')
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Slide</h4>
        <p>An element can appear to slide in from above or below
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('slide down')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('slide up')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('slide left')
        ;
        </div>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('slide right')
        ;
        </div>
      </div>

      <h2 class="ui dividing header">Static Animations</h2>

      <div class="no example">
        <h4 class="ui header">Jiggle</h4>
        <p>An element can jiggle to draw attention to its shape</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('jiggle')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Flash</h4>
        <p>An element can flash to draw attention to itself</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('flash')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Shake</h4>
        <p>An element can shake to draw attention to its position</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('shake')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Pulse</h4>
        <p>An element can pulse to draw attention to its visibility</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('pulse')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Tada</h4>
        <p>An element can give user positive feedback for an action</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('tada')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Bounce</h4>
        <p>An element can bounce to politely remind you of itself</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('bounce')
        ;
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">
          Glow
          <div class="ui teal label">New in 2.3</div>
        </h4>
        <p>An element can glow to show its position in a page.</p>
        <div class="code" data-demo="true">
        $('.autumn.leaf')
          .transition('glow')
        ;
        </div>
      </div>

    </div>
  </div>
  <div class="ui tab" data-tab="examples">
    <div class="fixed column">
      <div class="ui sticky">
        <img src="/images/leaves/5.png" class="ui long leaf image">
      </div>
    </div>
    <div class="examples">
      <h2 class="ui dividing header">Visibility</h2>
      <p>After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.</p>
      <div class="code" data-type="javascript" data-demo="true" data-title="Disappearing element">
      $('.long.leaf.image')
        .transition('scale')
      ;
      </div>

      <h2 class="ui dividing header">Specifying a direction</h2>
      <p>To force an animation direction, add either <code>in</code> or <code>out</code> to the animation name.</p>
      <div class="code" data-demo="true" data-title="Specifying a direction">
      $('.long.leaf.image')
        // if a direction if specified it will be obeyed
        .transition('horizontal flip in')
        .transition('vertical flip in')
      ;
      </div>

      <h2 class="ui dividing header">Automatic Direction</h2>

      <p>If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".</p>

      <div class="code" data-demo="true" data-title="Automatically choosing direction">
      $('.long.leaf.image')
        // fade up out is used if available
        .transition('fade up')
        // this is now fade up in
        .transition('fade up')
      ;
      </div>

      <h2 class="ui dividing header">Grouped Transitions</h2>

      <h4 class="ui header">Animation Intervals</h4>
      <p>When animating several different items in a group you may want to use an interval so that each item appears consecutively</p>
      <div class="code" data-demo="true" data-title="Animation Intervals">
      $('.jiggle.images .image')
        .transition({
          animation : 'jiggle',
          duration  : 800,
          interval  : 200
        })
      ;
      </div>
      <div class="ui small jiggle images">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
      </div>
      <h4 class="ui header">Animation Order</h4>
      <p>When hiding groups of elements, the default setting uses <code>reverse: 'auto'</code>. This will automatically reverse the order of animations from back-to-front when hiding elements to avoid layout reflows. When showing elements the order will return to its normal sequence.</p>
      <div class="code" data-demo="true" data-title="Reversing Animation Order" data-type="javascript">
      $('.sequenced.images .image')
        .transition({
          animation : 'scale',
          reverse   : 'auto', // default setting
          interval  : 200
        })
      ;
      </div>
      <div class="ui small sequenced images">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
      </div>

      <h4 class="ui header">Forcing Order</h4>
      <p>If you need to manually force reverse animations regardless of the animation direction, you can use <code>reverse: true</code>.</p>
      <div class="code" data-demo="true" data-title="Reversing Animation Order">
      $('.reverse.images .image')
        .transition({
          animation : 'pulse',
          reverse   : true,
          interval  : 200
        })
      ;
      </div>
      <div class="ui small reverse images">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
        <img src="/images/wireframe/image.png" class="ui wireframe image">
      </div>

      <h2 class="ui dividing header">Static Animations</h2>
      <p>Animations that do not have an in or out animation defined, will maintain their current visibility after running</p>
      <div class="code" data-demo="true" data-title="Static transitions">
      $('.long.leaf.image')
        .transition('pulse')
      ;
      </div>

      <h2 class="ui dividing header">Looping</h2>
      <p>Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle</p>
      <div class="code" data-demo="true" data-title="Starting looping">
      $('.long.leaf.image')
        .transition('set looping')
        .transition('bounce', '2000ms')
      ;
      </div>
      <div class="code" data-demo="true" data-title="Ending looping">
      $('.long.leaf.image')
        .transition('remove looping')
      ;
      </div>
    </div>
  </div>


  <div class="ui tab" data-tab="usage">
    <div class="fixed column">
      <div class="ui sticky">
        <img src="/images/leaves/4.png" class="ui green leaf image">
      </div>
    </div>
    <div class="examples">
      <h2 class="ui dividing header">Introduction</h2>

      <p>UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.</p>
      <p>Transitions are loosely coupled with other ui modules like <a href="/modules/dropdown.html">dropdowns</a> and <a href="/modules/modal.html">modals</a> to provide element transitions</p>

      <h3 class="ui header">Types</h3>
      <p>Transitions are separated into three categories. <b>Inward transitions</b>, <b>outward transitions</b>, and <b>static transitions</b>. These three categories determine the visibility of the element after the animation completes.</p>

      <h2 class="ui dividing header">Usage</h2>

      <h3 class="ui header">Initializing</h3>

      <p>If a transition is called without any arguments all default settings will be used.</p>

      <div class="code" data-demo="true" data-title="Initializing a transition">
      $('.green.leaf')
        // default everything
        .transition()
      ;
      </div>

      <h3 class="ui header">Passing in settings</h3>
      <p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with CSS shorthand, or with numbers.</p>
      <div class="code" data-demo="true" data-title="Settings objects">
      $('.green.leaf')
        .transition({
          animation  : 'scale',
          duration   : '2s',
          onComplete : function() {
            alert('done');
          }
        })
      ;
      </div>

      <h3 class="ui header">Display Type</h3>

      <p>Animations can be used on any display type not just block level elements. For example you can animate a button while preserving its <code>inline-block</code> status.</p>
      <div class="code" data-demo="true" data-title="Queueing animations">
      $('.test.button')
        .transition('horizontal flip', '500ms')
      ;
      </div>
      <div class="ui divider"></div>
      <div class="ui teal test labeled icon button">
        <i class="icon user"></i> Sign-up
      </div>

      <h3 class="ui header">Queuing animations</h3>

      <p>Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.</p>
      <div class="code" data-demo="true" data-title="Queueing animations">
      $('.green.leaf')
        .transition('horizontal flip', '500ms')
        .transition('horizontal flip', 500, function() {
          alert('done!');
        })
      ;
      </div>


      <h3 class="ui header">Stopping Animations</h3>

      <p>Animations can be stopped using three methods. <code>stop</code> will end the current animation, <code>stop all</code> will end animation and remove queued animations, and <code>clear queue</code> will continue the current playback but remove queued animations.</p>

      <div class="code" data-demo="true" data-title="Stopping Animations">
      // only first horizontal flip cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('stop')
        .transition('vertical flip')
      ;
      </div>
      <div class="code" data-demo="true" data-title="Stopping All Animations">
      // all horizontal flip cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('stop all')
        .transition('vertical flip')
      ;
      </div>
      <div class="code" data-demo="true" data-title="Clearing Animation Queue">
      // all queued animations cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('vertical flip')
        .transition('clear queue')
      ;
      </div>

      <h3 class="ui header">Hide/Show Without Transition</h3>

      <p>You can use transitions <code>show</code> and <code>hide</code> behavior to hide content without animation. This will preserve the display type, like <code>flex</code> or <code>table-cell</code> of an element just like animations.</p>

      <div class="ui ignored info message">Transition only use inline styles when an element's final display state is not <code>block</code>, or when an element cannot be hidden without an inline override.</div>

      <div class="code" data-demo="true" data-title="Toggling State">
      $('.demo.table tr:last-child')
        .transition('toggle')
      ;
      </div>
      <div class="code" data-demo="true" data-title="Hiding">
      $('.demo.table td:last-child')
        .transition('hide')
      ;
      </div>

      <table class="ui demo table">
        <tbody>
          <tr>
            <td>John Lilki</td>
            <td>jhlilk22@yahoo.com</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Jamie Harington</td>
            <td>jamieharingonton@yahoo.com</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Jill Lewis</td>
            <td>jilsewris22@yahoo.com</td>
            <td>Yes</td>
          </tr>
        </tbody>
      </table>

      <h2 class="ui dividing header">Behavior</h2>

      <p>All the following behaviors can be called using the syntax:</p>
      <div class="code">
      $('.your.element')
        .transition('behavior name', argumentOne, argumentTwo)
      ;
      </div>

      <table class="ui definition sortable celled table segment">
        <thead>
          <tr>
          <th>Behavior</th>
          <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>stop</td>
            <td>Stop current animation and preserve queue</td>
          </tr>
          <tr>
            <td>stop all</td>
            <td>Stop current animation and queued animations</td>
          </tr>
          <tr>
            <td>clear queue</td>
            <td>Clears all queued animations</td>
          </tr>
          <tr>
            <td>show</td>
            <td>Stop current animation and show element</td>
          </tr>
          <tr>
            <td>hide</td>
            <td>Stop current animation and hide element</td>
          </tr>
          <tr>
            <td>toggle</td>
            <td>Toggles between hide and show</td>
          </tr>
          <tr>
            <td>force repaint</td>
            <td>Forces reflow using a more expensive but stable method</td>
          </tr>
          <tr>
            <td>repaint</td>
            <td>Triggers reflow on element</td>
          </tr>
          <tr>
            <td>reset</td>
            <td>Resets all conditions changes during transition</td>
          </tr>
          <tr>
            <td>looping</td>
            <td>Enables animation looping</td>
          </tr>
          <tr>
            <td>remove looping</td>
            <td>Removes looping state from element</td>
          </tr>
          <tr>
            <td>disable</td>
            <td>Adds disabled state (stops ability to animate)</td>
          </tr>
          <tr>
            <td>enable</td>
            <td>Removes disabled state</td>
          </tr>
          <tr>
            <td>set duration(duration)</td>
            <td>Modifies element animation duration</td>
          </tr>
          <tr>
            <td>save conditions</td>
            <td>Saves all class names and styles to cache to be retrieved after animation</td>
          </tr>
          <tr>
            <td>restore conditions</td>
            <td>Adds back cached names and styles to element</td>
          </tr>
          <tr>
            <td>get animation name</td>
            <td>Returns vendor prefixed animation property for animationname</td>
          </tr>
          <tr>
            <td>get animation event</td>
            <td>Returns vendor prefixed animation property for animationend</td>
          </tr>
          <tr>
            <td>is visible</td>
            <td>Returns whether element is currently visible</td>
          </tr>
          <tr>
            <td>is animating</td>
            <td>Returns whether transition is currently occurring</td>
          </tr>
          <tr>
            <td>is looping</td>
            <td>Returns whether animation looping is set</td>
          </tr>
          <tr>
            <td>is supported</td>
            <td>Returns whether animations are supported</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Transition Settings
      <div class="sub header">Form settings modify the transition behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>fade</td>
          <td>Named animation event to used. Must be defined in CSS.</td>
        </tr>
        <tr>
          <td>interval</td>
          <td>0</td>
          <td>Interval in MS between each elements transition</td>
        </tr>
        <tr>
          <td>reverse</td>
          <td>auto</td>
          <td>When an interval is specified, sets order of animations. <code>auto</code> reverses only animations that are hiding.</td>
        </tr>
        <tr>
          <td>displayType</td>
          <td>false</td>
          <td>Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated.</td>
        </tr>
        <tr>
          <td>duration</td>
          <td>500ms</td>
          <td>Duration of the CSS transition animation</td>
        </tr>
        <tr>
          <td>useFailSafe</td>
          <td>true</td>
          <td>If enabled a <code>timeout</code> will be added to ensure <code>animationend</code> callback occurs even if element is hidden</td>
        </tr>
        <tr>
          <td>allowRepeats</td>
          <td>false</td>
          <td>If enabled will allow same animation to be queued while it is already occurring</td>
        </tr>
        <tr>
          <td>queue</td>
          <td>true</td>
          <td>Whether to automatically queue animation if another is occurring</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      Callbacks
      <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th class="four wide">Setting</th>
        <th>Context</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onShow</td>
          <td>transitioned element</td>
          <td>Callback on each transition that changes visibility to shown</td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>transitioned element</td>
          <td>Callback on each transition that changes visibility to hidden</td>
        </tr>
        <tr>
          <td>onStart</td>
          <td>transitioned element</td>
          <td>Callback on animation start, useful for queued animations</td>
        </tr>
        <tr>
          <td>onComplete</td>
          <td>transitioned element</td>
          <td>Callback on each transition complete</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="six wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>transition</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
  className   : {
    animating  : 'animating',
    disabled   : 'disabled',
    hidden     : 'hidden',
    inward     : 'in',
    loading    : 'loading',
    looping    : 'looping',
    outward    : 'out',
    transition : 'transition',
    visible    : 'visible'
  }
            </div>
          </td>
          <td>Class names used to attach style to state</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Transition</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>silent</td>
          <td>False</td>
          <td>Silences all console output including error messages, regardless of other debug settings.</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
  errors   : {
    noAnimation : 'There is no CSS animation matching the one you specified.',
    method      : 'The method you called is not defined'
  }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
